<script type="text/javascript">
    $(function() {
        var oTable1 = $('#sample-table-4').dataTable({
            "aoColumns": [
                {"bSortable": false},
                null, null,
                {"bSortable": false}
            ]});
        $('table th input:checkbox').on('click', function() {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                    .each(function() {
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });

        });
        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2))
                return 'right';
            return 'left';
        }
    })
</script>
<div class="page-content">
        
        
    <div class="page-header position-relative">
        <h1>Habitaci&oacute;n<small><i class="icon-double-angle-right"></i> Mantenimiento</small></h1>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box">
                <div class="widget-header"><h4>Lista de Habitaciones</h4>
                    <span class="widget-toolbar">
                        <a data-action="collapse" href="#">
                            <i class="icon-chevron-up"></i>
                        </a>
                    </span>
                </div>
                <div class="widget-body">
                    <div class="widget-body-inner">
                        <div class="widget-main">
                            
                                                    
                                                                 
                                          
                         
                             
                            <div class="widget-header header-color-blue2">
                                <h5 class="bigger lighter"> <i class="icon-bell-alt"></i> Segundo Piso</h5>
                            </div>
                            <table style="width: 100%;"  >
                                <div class="widget-box pricing-box">


                                    <tr>
                                        <?php 
                                        for ($c = 0; $c < 11; $c++) {
                                            ?>
                                                                       
                                        <td  style="height: 130px; width: 9%;"> <button   <?php if (isset($registros2)){ 
                                            if($registros2!=NULL){
                                            foreach ($registros2 as $fila1) {
                                                if ($c + 1 == $fila1->idHabitacion) {
                                                    if ($fila1->est_habit == 'ocupado') {
                                                        echo " disabled='true' class='btn btn-app btn-danger radius-4 '";
                                                    }if ($fila1->est_habit == 'reservado') {
                                                        echo " disabled='true' class='btn btn-app btn-warning radius-4 '";
                                                    }
                                                }
                                                
                                              
                                            }
                                        }}
                                        ?>  class="btn btn-app"  type="button" style="height:95%; width: 95%; text-align: center; "><i class="icon-group"></i><span style="font-size: 12px;"><?php echo $registros[$c]->nro_habi; ?></span><br><span style="font-size: 12px;"><?php echo $registros[$c]->desc_tipo; ?></span></button></td>
                                    <?php } ?>
                                    </tr>


                            </table>

                            
                            
                            
                            <div class="widget-header header-color-blue2">
                                <h5 class="bigger lighter"><i class="icon-bell-alt"></i> Tercer Piso</h5>
                            </div>
                            <table style="width: 100%;"  >
                                <tr><?php
                                    for ($j = 11; $j < 22; $j++) {
                                        ?>

                                        <td  style="height: 130px; width: 9%;"><button  <?php if (isset($registros2)): 
                                           if($registros2!=NULL){
                                            foreach ($registros2 as $fila1) {
                                                if ($j + 1 == $fila1->idHabitacion) {
                                                    if ($fila1->est_habit == 'ocupado') {
                                                        echo " disabled='true' class='btn btn-app btn-danger radius-4 '";
                                                    }if ($fila1->est_habit == 'reservado') {
                                                        echo " disabled='true' class='btn btn-app btn-warning radius-4 '";
                                                    }
                                                }
                                           }}
                                        endif;
                                        ?>  class="btn btn-app" style="height:95%; width: 95%; text-align: center; "><i class="icon-group"></i><span style="font-size: 12px;"><?php echo $registros[$j]->nro_habi; ?></span><br><span style="font-size: 12px;"><?php echo $registros[$j]->desc_tipo; ?></span></button></td>

    <?php
}
?>
                                </tr>


                            </table>

                            <div class="widget-header header-color-blue2">
                                <h5 class="bigger lighter"><i class="icon-bell-alt"></i> Primer Piso</h5>
                            </div>
                            <table style="width: 100%;"  >
                                <tr><?php
                                    for ($l = 22; $l < 26; $l++) {
                                        ?>

                                        <td  style="height: 130px; width: 9%;"><button  <?php if (isset($registros2)): 
                                            if($registros2!=NULL){
                                            foreach ($registros2 as $fila1) {
                                                if ($l + 1 == $fila1->idHabitacion) {
                                                    if ($fila1->est_habit == 'ocupado') {
                                                         echo " disabled='true'  class='btn btn-app btn-danger radius-4 '";
                                                    }if ($fila1->est_habit == 'reservado') {
                                                        echo " disabled='true' class='btn btn-app btn-warning radius-4 '";
                                                    }
                                                }
                                            }}
                                        endif;
                                    ?> class="btn btn-app"  style="height:95%; width: 95%; text-align: center; "><i class="icon-group"></i><span style="font-size: 12px;"><?php echo $registros[$l]->nro_habi; ?></span><br><span style="font-size: 12px;"><?php echo $registros[$l]->desc_tipo; ?></span></button></td>

    <?php
}
?>
                                    <td colspan="5"></td>
                                </tr>



                            </table>
<div class="widget-box pricing-box">
                            <div class="widget-header header-color-blue2">
                                <h5 class="bigger lighter" style="text-align: right; padding: 5px;"><i class="icon-asterisk "></i> Leyenda</h5>
                            </div>
    <div class="widget-body" style=" padding: 10px; text-align: right;">
<button class="btn btn-danger btn-small">
<i class="icon-group"></i>
</button> <span>OCUPADO</span>
<button class="btn btn-warning btn-small">
<i class="icon-group"></i>
</button> <span>RESERVADO</span>
<button class="btn  btn-small">
<i class="icon-group"></i>
</button> <span>DISPONIBLE</span>
    </div>
</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

